<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>复焕集 - 我的订单</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/mineShowInformation.css" />
<!-- 新增订单专用样式 -->
<link rel="stylesheet" href="css/productorder.css" />
</head>
<body>
	<!-- 导航栏 -->
	<div class="container-fluid fixed-top navbar-custom" id="top">
		<nav class="navbar navbar-expand-lg" role="navigation">
			<div class="container">
				<a href="index.jsp" class="navbar-brand navbar-b-custom font-logo">
					<img src="img/headLogo.png" alt="" id="headImage">
				</a>

				<!-- 搜索条 -->
				<form action="searchGoodsDo" method="get">
					<div
						class="d-flex position-absolute start-50 translate-middle-x serchBar">
						<input name="searchName" type="text"
							class="form-control1 form-control-sm" id="searchBar" />
						<button class="btn btn-primary ms-2 serchBut" id="searchBtn">搜索</button>
					</div>
				</form>

				<!-- 右侧用户信息栏 -->
				<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
					<li class="nav-item d-flex align-items-center"><input
						type="hidden" class="userid" value=${sessionScope.logInUser.userid}>
						<img src=${sessionScope.logInUser.headimg } alt="用户头像"
						class="headimg align-self-center"></li>
					<li class="nav-item"><a href="mineInformation.jsp"
						class="nav-link navbar-a-custom">我的主页</a></li>
					<li class="nav-item"><a href="mychartingRecords.jsp"
						class="nav-link navbar-a-custom">消息</a></li>
					<li class="nav-item"><a href="order.jsp"
						class="nav-link navbar-a-custom">我的订单</a></li>
					<li class="nav-item"><a href="userLogOut" 
						class="nav-link navbar-a-custom">退出</a></li>
				</ul>
			</div>
		</nav>
	</div>

	<!-- 左侧固定菜单 -->
	<div class="left-panel" id="left" style="margin-top: 40px;">
		<div class="personal_Information">
			<div class="mine_personal_Information active">
				<img src="img/mine_personal_information.png" alt=""> <span
					class="mineInformation">我的信息</span>
			</div>
			<div class="mine_personal_Information Mytransaction">
				<img src="img/mine_information_order.png" alt=""> <span>我的交易</span>
				<img src="img/prePic.png" alt=""
					class="MytransactionPng MytransactionAction">
			</div>
			<a href="order.jsp">
				<div class="mine_personal_Information needHidden mine_order_Hidden">
					已购买</div>
			</a> <a href="ProductOrder.jsp">
				<div class="mine_personal_Information needHidden mine_order_Hidden">
					订单处理</div>
			</a> <a href="addProduct.jsp">
				<div class="mine_personal_Information needHidden mine_order_Hidden">
					添加商品</div>
			</a> <a href="myColleation.jsp">
				<div class="mine_personal_Information">
					<img src="img/mine_personal_collect.png" alt=""> <span>我的收藏</span>
				</div>
			</a>
			<div class="mine_personal_Information AccountSettings">
				<img src="img/mine_information_set.png" alt=""> <span class="">账户设置</span>
				<img src="img/prePic.png" alt=""
					class="AccountSettingsPng AccountSettingsAction">
			</div>
			<a href="mineInformation.jsp">
				<div
					class="mine_personal_Information needHidden mine_personal_Information_Hidden">
					个人资料</div>
			</a> <a href="informationModification.jsp">
				<div
					class="mine_personal_Information needHidden mine_personal_Information_Hidden">
					账号与安全</div>
			</a>

		</div>
	</div>

	<!-- 右侧固定导航栏 -->
	<div class="right-panel" style="margin-top: 40px;">
		<div class="right-section">
			<div class="right-title">常用功能</div>
			<a href="sellerInfo.jsp" class="right-link">
				<i class="fa fa-store"></i> 我的店铺
			</a> 
			<a href="mineInformation.jsp" class="right-link">
				<i class="fa fa-comment-alt"></i> 我的评价
			</a> 
			<a href="#" class="right-link">
				<i class="fa fa-question-circle"></i> 帮助中心
			</a>
		</div>
	</div>

	<!-- 中部内容区 - 订单页面 -->
	<div class="main-content">
		<div class="middle" id="middle">
			<div class="add-product-header">
				<h2>
					<i class="fas fa-shopping-cart"></i> 我的订单
				</h2>
				<p>管理您的所有交易订单</p>
			</div>

			<!-- 订单状态选项卡 -->
			<ul class="nav nav-tabs order-tabs" id="orderTabs" role="tablist">
			    <li class="nav-item" role="presentation">
			        <button class="nav-link active" id="all-orders-tab" data-type="0"
			            type="button" role="tab">全部订单</button>
			    </li>
			    <li class="nav-item" role="presentation">
			        <button class="nav-link" id="pending-tab" data-type="1"
			            type="button" role="tab">
			            已完成 <span class="badge bg-danger ms-1" id="pending-count">0</span>
			        </button>
			    </li>
			    <li class="nav-item" role="presentation">
			        <button class="nav-link" id="shipped-tab" data-type="2"
			            type="button" role="tab">待发货</button>
			    </li>
			    <li class="nav-item" role="presentation">
			        <button class="nav-link" id="completed-tab" data-type="3"
			            type="button" role="tab">已取消</button>
			    </li>
			    <li class="nav-item" role="presentation">
			        <button class="nav-link" id="canceled-tab" data-type="4"
			            type="button" role="tab">待付款</button>
			    </li>
			    <!-- 添加已上架商品选项卡 -->
			    <li class="nav-item" role="presentation">
			        <button class="nav-link" id="onshelf-tab" data-type="5"
			            type="button" role="tab">已上架</button>
			    </li>
			</ul>
			
			<div class="tab-content" id="orderTabContent">
			    <!-- 全部订单 -->
			   <div class="tab-pane fade show active" id="all-orders"
			       role="tabpanel">
			       <div class="loading-spinner">
			           <div class="spinner"></div>
			       </div>
			   </div>
			
			   <!-- 已完成订单 -->
			   <div class="tab-pane fade" id="pending" role="tabpanel">
			       <div class="loading-spinner">
			           <div class="spinner"></div>
			       </div>
			   </div>
			
			   <!-- 待发货订单 -->
			   <div class="tab-pane fade" id="shipped" role="tabpanel">
			       <div class="loading-spinner">
			           <div class="spinner"></div>
			       </div>
			   </div>
			
			   <!-- 已取消订单 -->
			   <div class="tab-pane fade" id="completed" role="tabpanel">
			       <div class="loading-spinner">
			           <div class="spinner"></div>
			       </div>
			   </div>
			
			   <!-- 待付款
			   
			   订单 -->
			   <div class="tab-pane fade" id="canceled" role="tabpanel">
			       <div class="loading-spinner">
			           <div class="spinner"></div>
			       </div>
			   </div>
			   
			   <!-- 已上架商品内容区 -->
			   <div class="tab-pane fade" id="onshelf" role="tabpanel">
			       <div class="loading-spinner">
			           <div class="spinner"></div>
			       </div>
			   </div>
			
			   <!-- 无订单时的显示 -->
			    <div class="empty-orders d-none">
			        <i class="fas fa-box-open"></i>
			        <h4>暂无相关订单</h4>
			        <p class="text-muted">您还没有相关状态的订单，快去逛逛吧！</p>
			        <button class="btn btn-primary mt-3">去首页逛逛</button>
			    </div>
			</div>
			</div>
			</div>
			<!-- 底部区 -->
			<footer class="container-fluid bottom p-3 mt-auto" id="footer">
				<div class="infoLeft mx-auto">
					<strong>复焕集 </strong>旧物也能焕然一新的二手市场。
				</div>
				<div class="container">
					<div class="d-flex flex-wrap justify-content-between">
						<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
							<strong>关于我们</strong>
							<li><a href="">公司介绍</a></li>
							<li><a href="">团队介绍</a></li>
							<li><a href="">媒体报道</a></li>
							<li><a href="">加入我们</a></li>
						</ul>
						<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
							<strong>帮助中心</strong>
							<li><a href="">新手入门</a></li>
							<li><a href="">交易流程</a></li>
							<li><a href="">常见问题</a></li>
							<li><a href="">安全指南</a></li>
						</ul>
						<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
							<strong>规则中心</strong>
							<li><a href="">用户协议</a></li>
							<li><a href="">隐私政策</a></li>
							<li><a href="">交易规则</a></li>
							<li><a href="">社区公约</a></li>
						</ul>
						<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
							<strong>联系我们</strong>
							<li><a href="">客服电话：400-114-514</a></li>
							<li><a href="">商务合作：bd@fuhuanji.com</a></li>
							<li><a href="">举报反馈：report@fuhuanji.com</a></li>
						</ul>
					</div>
				</div>
				<div class="copyright">© 2023 复焕集 All Rights Reserved.
					蜀ICP备12345678号</div>
			</footer>
			<script src="bootstrap/js/bootstrap.min.js"></script>
			<script src="js/jquery.js"></script>
			<script src="js/mineInformation.js"></script>
			<script src="js/ProductOrder.js"></script>
			<script src="js/menuNavigation.js"></script>
</body>
</html>